<template>
  <div>
    <div>
      <el-button
        type="primary"
        @click="addcategories, (dialogFormVisible = true)"
        >添加分类</el-button
      >
      <!-- 一级表单 -->
      <el-table
        :data="cateList.list"
        :border="parentBorder"
        style="width: 100%"
      >
        <el-table-column type="expand">
          <template v-slot="scope">
            <el-row>
              <el-col>
                <!-- 二级表单 -->
                <el-table
                  :data="scope.row.children"
                  :border="parentBorder"
                  style="width: 100%"
                >
                  <el-table-column type="expand">
                    <!-- 三级表单 -->
                    <template v-slot="scope">
                      <el-row>
                        <el-col>
                          <el-table
                            :data="scope.row.children"
                            :border="parentBorder"
                            style="width: 100%"
                          >
                            <el-table-column type="" />
                            <el-table-column prop="cat_name" />
                            <el-table-column prop="cat_level">
                              <template v-slot="scope">
                                <el-tag
                                  type="danger"
                                  v-if="scope.row.pay_status"
                                  ><el-icon><CircleCloseFilled /></el-icon
                                ></el-tag>
                                <el-tag type="success" v-else
                                  ><el-icon><CircleCheckFilled /></el-icon
                                ></el-tag>
                              </template>
                            </el-table-column>
                            <el-table-column prop="cat_level">
                              <template v-slot="scope">
                                <el-tag
                                  type="danger"
                                  v-if="scope.row.cat_pid == 0"
                                  ><el-tag>一级</el-tag></el-tag
                                >
                                <el-tag
                                  type="success"
                                  v-if="scope.row.cat_pid == 1"
                                  ><el-tag type="success">二级</el-tag></el-tag
                                >
                                <el-tag
                                  type="warning"
                                  v-if="scope.row.cat_pid == 3"
                                  ><el-tag type="warning">三级</el-tag></el-tag
                                >
                              </template>
                            </el-table-column>
                            <el-table-column prop="name">
                              <template #default="scope">
                              <el-button type="primary" :icon="Edit"
                              @click="dialogFormVisible1 = true,getform2(scope.row)"
                                >编辑</el-button
                              >
                              <el-button type="danger" :icon="Delete"
                              @click="open(scope.row.cat_id)"
                                >删除</el-button
                              >
                              </template>
                            </el-table-column>
                          </el-table>
                        </el-col>
                      </el-row>
                    </template>
                  </el-table-column>
                  <el-table-column prop="cat_name" />
                  <el-table-column prop="cat_level">
                    <template v-slot="scope">
                      <el-tag type="danger" v-if="scope.row.pay_status"
                        ><el-icon><CircleCloseFilled /></el-icon
                      ></el-tag>
                      <el-tag type="success" v-else
                        ><el-icon><CircleCheckFilled /></el-icon
                      ></el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column prop="cat_level">
                    <template v-slot="scope">
                      <el-tag type="danger" v-if="scope.row.cat_pid == 0"
                        ><el-tag>一级</el-tag></el-tag
                      >
                      <el-tag type="success" v-if="scope.row.cat_pid == 1"
                        ><el-tag type="success">二级</el-tag></el-tag
                      >
                      <el-tag type="success" v-if="scope.row.cat_pid == 2"
                        ><el-tag type="warning">三级</el-tag></el-tag
                      >
                    </template>
                  </el-table-column>
                  <el-table-column prop="name">
                    <template #default="scope">
                    <el-button type="primary" :icon="Edit" @click="dialogFormVisible1 = true,getform2(scope.row)">编辑</el-button>
                    <el-button type="danger" :icon="Delete" @click="open(scope.row.cat_id)">删除</el-button>
                    </template>
                  </el-table-column>
                </el-table>

                <div class="grid-content ep-bg-purple-dark" />
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column label="#" type="index" />
        <el-table-column label="分类名称" prop="cat_name" />
        <el-table-column label="是否有效" prop="cat_level">
          <template v-slot="scope">
            <el-tag type="danger" v-if="scope.row.pay_status"
              ><el-icon><CircleCloseFilled /></el-icon
            ></el-tag>
            <el-tag type="success" v-else
              ><el-icon><CircleCheckFilled /></el-icon
            ></el-tag>
          </template>
        </el-table-column>
        <el-table-column label="排序" prop="cat_level">
          <template v-slot="scope">
            <el-tag type="danger" v-if="scope.row.cat_pid == 0"
              ><el-tag>一级</el-tag></el-tag
            >
            <el-tag type="success" v-if="scope.row.cat_pid == 1"
              ><el-tag type="success">二级</el-tag></el-tag
            >
            <el-tag type="success" v-if="scope.row.cat_pid == 2"
              ><el-tag type="warning">三级</el-tag></el-tag
            >
          </template>
        </el-table-column>
        <el-table-column label="操作" prop="name">
          <template #default="scope">
          <el-button type="primary" :icon="Edit" @click="dialogFormVisible1 = true,getform2(scope.row)">编辑</el-button>
          <el-button type="danger" :icon="Delete" @click="open(scope.row.cat_id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <div class="demo-pagination-block">
        <el-config-provider :locale="zhCn">
          <el-pagination
            v-model:current-page="currentPage4"
            v-model:page-size="pageSize4"
            :page-sizes="[5, 10, 15, 20]"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="cateList.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-config-provider>
      </div>
      <!-- 添加对话框 -->
      <el-dialog v-model="dialogFormVisible" title="添加分类">
        <el-form :model="form">
          <el-form-item label="分类名称" :label-width="formLabelWidth">
            <el-input v-model="inpval" autocomplete="off" />
          </el-form-item>
          <el-form-item label="父级分类" :label-width="formLabelWidth">
            <el-cascader
              v-model="value1"
              :options="cateLists.list"
              :props="cateProps"
              @change="handleChange"
            />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取消</el-button>
            <el-button
              type="primary"
              @click="(dialogFormVisible = false), addcategories()"
            >
              确定
            </el-button>
          </span>
        </template>
      </el-dialog>
      <!-- 编辑对话框 -->
      <el-dialog v-model="dialogFormVisible1" title="编辑分类">
    <el-form :model="form2">
      <el-form-item label="分类名称" :label-width="formLabelWidth">
        <el-input v-model="form2.name" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible1 = false">取消</el-button>
        <el-button type="primary" @click="dialogFormVisible1 = false,getCategore()">
          确定
        </el-button>
      </span>
    </template>
      </el-dialog>
    </div>
  </div>
</template>
<script setup>
import { ref, reactive } from "vue";
import { categoriesListse, categoriesAdd, categoriesList,deleteCategor,getCategor } from "../tools/ajax";
import zhCn from "element-plus/lib/locale/lang/zh-cn"; // 中文语言插件
import { ElMessage, ElMessageBox } from 'element-plus'
import {
  Delete,
  Edit,
  CircleCheckFilled,
  CircleCloseFilled,
} from "@element-plus/icons-vue";

const currentPage4 = ref(1);
const pageSize4 = ref(5);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const dialogFormVisible = ref(false);
const dialogFormVisible1 = ref(false);

const value1 = ref([]);



const cateProps = {
  //展示分类数据的配置选项
  expandTrigger: "hover",
  label: "cat_name",
  value: "cat_id",
  children: "children",
};
const handleSizeChange = (val) => {
  categoriesListse({
    pagenum: currentPage4._value,
    pagesize: pageSize4._value,
  }).then((res) => {
    cateList.list = res.data.result;
  });
};
const handleCurrentChange = (val) => {
  categoriesListse({
    pagenum: currentPage4._value,
    pagesize: pageSize4._value,
  }).then((res) => {
    cateList.list = res.data.result;
  });
};
// 编辑数据
const form2=reactive({
    name:"",
    id:""
})
// 修改编辑数据
function getform2(name){
  // console.log(name);
  form2.name=name.cat_name
  form2.id=name.cat_id
}
// 编辑接口
function getCategore(){
  getCategor({id:form2.id*1,cat_name:form2.name}).then(res=>{
    console.log(res);
  })
}
const cateList = reactive({});
const cateLists = reactive({});
const form = reactive({});
const inpval = ref("");
let inppid = ref("");
let inplevel = ref("");
// 删除接口
function deletecat(ida){
  console.log(ida);
  console.log(111);
  deleteCategor({id:ida*1}).then(res=>{
    console.log(res);
  })
  categoriesListset()
  categoriesListset1()
}
// 删除弹窗
const open = (id) => {
  ElMessageBox.confirm("此操作将永久删除该用户, 是否继续?", "Warning", {
    confirmButtonText: "OK",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(() => {
      ElMessage({
        type: "success",
        message: "删除成功",
      });
      deletecat(id)
    })
    .catch(() => {
      ElMessage({
        type: "info",
        message: "取消删除",
      });
    });
};
function addcategories() {  
    categoriesAdd({
  cat_name: inpval,
  cat_pid: inppid,
  cat_level: inplevel,
}).then(res=>{
    console.log(res);
})
console.log(111);
}
// 联动事件
function handleChange(value) {
  console.log(value1);
  console.log(value);
  //   父级id
  inppid = value[value.length-1];
  //   等级分类
  inplevel = value.length - 1;
}
// 分类数据列表
function categoriesListset(){
  categoriesListse({
  pagenum: currentPage4._value,
  pagesize: pageSize4._value,
}).then((res) => {
    console.log(res);
  cateList.list = res.data.result;
  cateList.total = res.data.total;
});
}
categoriesListset()

function categoriesListset1(){
  categoriesList().then((res) => {
    console.log(res);
    cateLists.list = res.data;
  });
}
categoriesListset1()
</script>
<style scoped lang="less">
</style>